<template>
  <div class="list">
    <div
      class="list-item"
      v-for="(item, index) in list"
      :key="index"
      @click="showAction"
      :showshow="show"
    >
      <div @click="intoCollectList(item.collect_name)">
        <!-- 收藏夹名字 -->
        <p>{{ item.collect_name }}</p>
        <!-- 收藏夹里菜谱的数量 -->
        <!-- <span>{{ item.num }}</span> -->
      </div>
    </div>
    <collect-list v-if="show" />
  </div>
</template>

<script>
import CollectList from "./CollectList.vue";

export default {
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  components: {
    CollectList,
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showAction() {
      this.show = !this.show;
    },
    intoCollectList(value) {
      this.$store.commit("CollectName", value);
    },
  },
};
</script>

<style scoped lang="scss">
.list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.list-item {
  width: 30%;
  height: 20%;
  margin: 5px;
  border-radius: 10px;
  color: #fff;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  div {
    width: 100%;
    height: 100%;
    background-color: rgba(38, 35, 35, 0.39);
    border-radius: 10px;
    text-align: center;
    line-height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
